<script setup lang="ts">
import { reactive, Ref, watch, ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import { pageParamsInterface } from "@/views/product/trademark/interface/interface.ts";
import useTabNavStore from "@/pinia/modules/product/attributeStore/tabNavStore/tabNavStore.ts";
import useSpuStore from "@/pinia/modules/product/spuStore/spuStore.ts";
import useAttributeStore from "@/pinia/modules/product/attributeStore/attributeStore/attributeStore.ts";
import { spu } from "@/api/product/spuApi/interface.ts";
import { findSkuList } from "@/api/product/spuApi/spu.ts";

const tabNavStore = useTabNavStore();
const spuStore = useSpuStore();
const attributeStore = useAttributeStore();
const { categoryId } = storeToRefs(tabNavStore);
const { total, spuList } = storeToRefs(spuStore);

/* 加载SPU列表的loading状态 */
const loading: Ref<boolean> = ref<boolean>(false);
/* 获取SPU列表的分页参数 */
const pageParams: pageParamsInterface = reactive<pageParamsInterface>({ page: 1, limit: 10 });


/* sku列表 */
const skuList = ref<any>([]);
/* 是否展示sku列表对话框 */
const dialogVisible = ref<boolean>(false);

/* 获取已有图片列表的回调函数 */
const fetchSpuImageList = async (spuId: number) => {
  try {
    await spuStore.fetchSpuImageList(spuId);
    ElMessage.success("spu图片查询成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

/* 获取已有销售属性列表的回调函数 */
const fetchSpuSaleAttributeList = async (spuId: number) => {
  try {
    await spuStore.fetchSpuSaleAttributeList(spuId);
    ElMessage.success("spu销售属性查询成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

/* 获取平台属性的回调函数 */
const fetchAttributeList = async () => {
  try {
    loading.value = true;
    await attributeStore.fetchAttributeList(categoryId.value);
    ElMessage.success("属性列表获取成功");
  } catch (error: any) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

/* 获取spu列表的回调函数 */
const fetchSpuList = async () => {
  try {
    loading.value = true;
    await spuStore.fetchSpuList(pageParams, categoryId.value.category3Id);
  } catch (error: any) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

/* 点击添加sku按钮的回调函数 */
const handleAddSku = (currentSpu: spu) => {
  spuStore.changeScreen(2);
  fetchSpuImageList(currentSpu.id as number);
  fetchSpuSaleAttributeList(currentSpu.id as number);
  fetchAttributeList();
  spuStore.findSpu(currentSpu);
};

/* 点击添加spu按钮的回调函数 */
const handleAddSpu = () => {
  spuStore.changeScreen(1);
  spuStore.changeEdit(false);
};

/* 点击编辑spu按钮的回调函数 */
const handleEditSpu = (currentSpu: spu) => {
  spuStore.changeScreen(1);
  spuStore.changeEdit(true);
  //获取spu已有图片列表
  fetchSpuImageList(currentSpu.id as number);
  //获取spu已有销售属性列表
  fetchSpuSaleAttributeList(currentSpu.id as number);
  //数据回显
  spuStore.findSpu(currentSpu);

};

/* 点击删除SPU按钮的回调函数 */
const handleDeleteSpu = async (currentSpu: spu) => {
  const confirm: string = await ElMessageBox.confirm(`确定删除${currentSpu.spuName}吗?`, "警告", { type: "warning" }).catch((error: any) => error);
  if (confirm === "cancel") return;
  try {
    const deleteResult: string = await spuStore.deleteSpu(currentSpu.id as number);
    await fetchSpuList();
    ElMessage.success(deleteResult);
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

/* 点击查看sku按钮的回调函数 */
const handleShowSkuList = async (row: spu) => {
  try {
    const { data } = await findSkuList(row.id as number);
    dialogVisible.value = true;
    skuList.value = data;
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};

/* 当前分页器一页展示的数据条数发生变化的回调函数 */
const handleSizeChange = () => {
  fetchSpuList();
};
/* 分页器当前页码发生变化的回调函数 */
const handleCurrentChange = () => {
  fetchSpuList();
};

watch(() => categoryId.value.category3Id, () => {
  fetchSpuList();
});
</script>

<template>
  <div class="spuTable">
    <el-button type="primary" icon="Plus" @click="handleAddSpu">添加SPU</el-button>
    <el-table border stripe :data="spuList" v-loading="loading" element-loading-text="数据加载中....." element-loading-background="#fff">
      <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName" align="center"></el-table-column>
      <el-table-column label="SPU描述" prop="description" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="SPU操作" align="center">
        <template #default="{row}">
          <el-button type="primary" icon="Plus" @click="handleAddSku(row)">添加SKU</el-button>
          <el-button type="success" icon="View" @click="handleShowSkuList(row)">查看SKU列表</el-button>
          <el-button type="warning" icon="Edit" @click="handleEditSpu(row)">编辑SPU</el-button>
          <el-button type="danger" icon="Delete" @click="handleDeleteSpu(row)">删除SPU</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageParams.page"
      v-model:page-size="pageParams.limit" :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(total||0)" background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
  <el-dialog v-model="dialogVisible" title="产品列表" width="30%">
    <el-table :data="skuList" border stripe>
      <el-table-column label="SKU名字" prop="skuName" align="center"></el-table-column>
      <el-table-column label="SKU价格" prop="price" align="center"></el-table-column>
      <el-table-column label="SKU重量" prop="weight" align="center"></el-table-column>
      <el-table-column label="SKU图片" align="center">
        <template #default="{row}">
          <img :src="row.skuDefaultImg" alt="">
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.spuTable {

  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}

img {
  width: 80px;
}
</style>
